<template>
  <div class="aftersale">
    <div class="aftersaleleft">
      <div class="configcenter">
        <div class="title">售后</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="aftersalecenter">
      <div style="margin-bottom:15px;">售后客服电话设置：<el-input v-model="afterSalePhone" placeholder="输入客服号码"></el-input>  用户前端展示该号码为售后服务号码。</div>
      <div style="margin-bottom:15px;">退款设置：距离预约时间 <el-input v-model="makeNotRefundTime" placeholder="请输入" class="shortinput"></el-input> 小时内，不可退款。</div>
      <div style="margin-bottom:15px;">改约服务费用配置：<el-input v-model="changeServiceCost" placeholder="请输入" class="shortinput"></el-input> 元 </div>
      <div style="margin-bottom:15px;">取消服务费用配置：<el-input v-model="retreatServiceCost" placeholder="请输入" class="shortinput"></el-input> 元 </div>
      <div style="margin-bottom:15px;">服务费用支付倒计时配置：<el-input v-model="changeCostDay" placeholder="请输入" class="shortinput"></el-input> 天 </div>
      <div>取消/改约服务费用收取配置：用户预约时间点前<el-input v-model="changeCostCountDown" placeholder="请输入" class="shortinput"></el-input> 小时内收取取消/改约服务费 </div>
    </div>
    <div class="aftersaleright">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    systemConfigAfterSale:{
      type: Object,
      required: false
    }
  },
  data() {
    return {
      configType: 'system_config_after_sale',
      afterSalePhone: '',
      makeNotRefundTime: '',
      changeServiceCost: '',
      id: '',
      changeCostDay: '', // 服务费用支付倒计时配置
      changeCostCountDown: '', // 距离预约时间前多少小时收取服务费（小时）
      retreatServiceCost: ''
    }
  },
  methods: {
    async save() {
      if(this.makeNotRefundTime) {
        const num = Number(this.makeNotRefundTime)
        if(isNaN(num)){
          this.$message.error('预约后不可退款时间必须为数字')
          return false
        }
      }
      if(this.changeServiceCost) { // 最多两位小数  改约
        const num = Number(this.changeServiceCost)
        if(isNaN(num)){
          this.$message.error('改约服务费用必须为数字')
          return false
        }
        const str = this.changeServiceCost
        const reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/
        if(!reg.test(str)) {
          this.$message.error("改约服务费用最多为两位小数")
          return false
        }
      }
      if(this.retreatServiceCost) { // 最多为两位小数 取消
        const num = Number(this.retreatServiceCost)
        if(isNaN(num)){
          this.$message.error('取消服务费用必须为数字')
          return false
        }
        const str = this.retreatServiceCost
        const reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/
        if(!reg.test(str)) {
          this.$message.error("取消服务费用最多为两位小数")
          return false
        }
      }
      if(this.changeCostDay) {// 服务费用支付倒计时（天）
        const num = Number(this.changeCostDay)
        if(isNaN(num)){
          this.$message.error('服务费用支付倒计时必须为数字')
          return false
        }
        const str = this.changeCostDay
        const reg = /^\d+$/
        if(!reg.test(str)) {
          this.$message.error("服务费用支付倒计时必须正整数")
          return false
        }
      }
      if(this.changeCostCountDown) { // 距离预约时间前多少小时收取服务费（小时）
        const num = Number(this.changeCostCountDown)
        if(isNaN(num)){
          this.$message.error('取消/改约服务费用收取配置必须为数字')
          return false
        }
        const str = this.changeCostCountDown
        const reg = /^\d+$/
        if(!reg.test(str)) {
          this.$message.error("取消/改约服务费用收取配置必须正整数")
          return false
        }
      }
      const data = {
        systemConfigAfterSale: {
          configType: this.configType,
          afterSalePhone: this.afterSalePhone,
          makeNotRefundTime: this.makeNotRefundTime,
          changeServiceCost: Number(this.changeServiceCost), // 改约
          retreatServiceCost: Number(this.retreatServiceCost), // 取消
          changeCostDay: Number(this.changeCostDay), // 支付倒计时
          changeCostCountDown: Number(this.changeCostCountDown), // 取消/改约服务费用收取配置（小时）
        }
      }
      if(this.id) {
        data.systemConfigAfterSale.id = this.id
      }
      await this.$http({
        url: '/hsssystemadmin/config/system/updateSystemConfig',
        method: 'post',
        data
      }).then(res => {
        this.$message.success('售后基础信息保存成功')
        this.$emit('research')
      }).catch(err => {
        this.$message.error('售后基础信息保存失败')
      })
    }
  },
  watch: {
    systemConfigAfterSale(newvalue) {
      if(newvalue) {
        this.configType = newvalue.configType
        this.afterSalePhone = newvalue.afterSalePhone
        this.makeNotRefundTime = newvalue.makeNotRefundTime
        this.changeServiceCost = newvalue.changeServiceCost // 改约
        this.retreatServiceCost = newvalue.retreatServiceCost // 取消
        this.changeCostDay = newvalue.changeCostDay // 支付倒计时
        this.changeCostCountDown = newvalue.changeCostCountDown // 取消/改约服务费用收取配置（小时）
        this.id = newvalue.id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.aftersale{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .aftersaleleft{
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .configcenter{
      width: 100px;
      height: 70px;
      .title{
        width: 100%;
        height: 35px;
        background-color: #f56a23;
        font-size: 22px;
        color: #fff;
        line-height: 35px;
        text-align: center;
      }
      .baseconfig{
        width: 100%;
        height: 35px;
        font-size: 22px;
        line-height: 35px;
        text-align: center;
        color: #aaa;
      }
    }
  }
  .aftersaleright{
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .save{
      width: 70px;
      height: 40px;
      font-size: 22px;
      text-align: center;
      color: #fff;
      background-color: #00cb75;
      line-height: 40px;
    }
  }
  .aftersalecenter{
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    padding: 20px;
    font-size: 12px;
    /deep/ .el-input{
      width: 160px;
      height: 30px;
      box-sizing: border-box;
      font-size: 12px;
      .el-input__inner{
        width: 160px;
        height: 30px;
        text-align: center;
      }
    }
    /deep/ .shortinput.el-input{
      width: 60px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner{
        box-sizing: border-box;
        width: 60px;
        height: 30px;
        padding: 0 8px;
      }
    }
  }
}
</style>